<template>
  <div class="app-container">
    <!-- 活动数据详情 -->
    <div>
      <el-descriptions class="margin-top" title="活动数据" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-discount"></i>
            活动名
          </template>
          <el-tooltip placement="bottom" effect="light">
            <el-button>{{activity.activityName}}</el-button>
            <div slot="content"
            v-html="activity.intro">
              {{activity.intro}}
            </div>
          </el-tooltip>

        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-school"></i>
            所属学院
          </template>
          {{activity.deptName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-time"></i>
            活动时间
          </template>
          {{activity.activityTime}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            活动地点
          </template>
          <el-tag size="small">{{activity.place}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-medal-1"></i>
            活动奖励
          </template>
          {{activity.reward}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-watch-1"></i>
            志愿服务时长
          </template>
          {{activity.volunteerTime}}
        </el-descriptions-item>
<!--        <el-descriptions-item>-->
<!--          <template slot="label">-->
<!--            <i class="el-icon-office-building"></i>-->
<!--            活动简简介-->
<!--          </template>-->
<!--        </el-descriptions-item>-->
      </el-descriptions>

    </div>
    <el-divider content-position="left">活动参与人员</el-divider>

    <!-- 筛选条件 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
      <el-form-item label="姓名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入人员姓名"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="报名状态" prop="state">
        <el-select
          v-model="queryParams.pitchOn"
          placeholder="报名状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" class="typeface" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" class="typeface" @click="resetQuery">重置</el-button>
      </el-form-item>

      <!-- 表格数据 -->
      <el-table v-loading="loading" :data="entryBlankList" >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="学号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
        <el-table-column label="姓名" align="center" key="userName" prop="userName" v-if="columns[1].visible"/>
        <el-table-column label="所属学院" align="center" key="deptId" prop="deptName" v-if="columns[2].visible"/>
        <el-table-column label="本次活动时长" align="center" key="volunteerTime" v-if="columns[3].visible" >
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.volunteerTime"
              @change="handleChange"
              :min="0" :max="10"
              size="mini"
              label="描述文字"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="评分" align="center" key="grade" v-if="columns[4].visible" width="180">
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.grade"
              show-text>
            </el-rate>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="160"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >确定</el-button>

          </template>
        </el-table-column>4
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="listEval"
      />
    </el-form>


  </div>
</template>

<script>
  import {getVolunteer,updateVolunteer } from "@/api/volunteer/volunteerActivity";
  import {listEval, grade } from "@/api/volunteer/entryBlank";
  import { treeselect } from "@/api/system/dept";

  import Treeselect from "@riophae/vue-treeselect";

  export default {
        name: "evaluationDetails",
        dicts: ['activity_state','activity_apply_state'],
        components: { Treeselect },

      data(){
          return{
            // 遮罩层
            loading: true,
            activityId: undefined,
            activity:{},
            entryBlankList: null,
            // 查询参数
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              activityId: undefined,
              userName: undefined,
              pitchOn: undefined,
              deptId: undefined
            },
            //报名状态
            options:[{
              value: '1',
              label: '未选中'},
              {value: '2',
                label: '选中'}
            ],
            // 列表信息
            columns:[
              { key: 0, label: `学号`, visible: true },
              { key: 1, label: `姓名`, visible: true },
              { key: 2, label: `学院`, visible: true },
              { key: 3, label: `本次活动时长`, visible: true },
              { key: 4, label: `评分`, visible: true },
              { key: 5, label: `评语`, visible: true }

            ],
            // 评分数据
            gradeDTO:{
              activityId: undefined,
              userId: undefined,
              time: 0,
              grade: 0,
              comment: undefined
            }
          }
      },
      watch: {
        // 根据名称筛选部门树
        deptName(val) {
          this.$refs.tree.filter(val);
        }
      },
      created() {
          console.log(this.$route.query)
        const activityId = this.$route.query && this.$route.query.activityId;
        this.activityId = activityId;
        this.queryParams.activityId = activityId;
        console.log(this.activityId)
        this.getVolunteer();

        this.listEval(this.queryParams);
      },
      methods: {
        /** 获取活动数据 */
        getVolunteer: function () {
          getVolunteer(this.activityId).then(respones =>{
            this.activity = respones.data;
          });
        },
        /** 获取被选中的人员报名列表 */
        listEval(queryParams){
          listEval(queryParams).then(respones =>{
            this.entryBlankList = respones.rows;
            this.total = respones.total;
            this.loading = false;
          });
        },
        /** 搜索 */
        handleQuery: function () {
          this.queryParams.pageNum = 1;
          this.listEval(this.queryParams);
        },
        /** 重置 */
        resetQuery: function(){
          this.resetForm("queryForm");
          this.handleQuery();
        },
        /** 进行评分 */
        handleUpdate(single) {
          this.gradeDTO.activityId = single.activityId;
          this.gradeDTO.userId = single.userId;
          this.gradeDTO.time = single.volunteerTime;
          this.gradeDTO.grade = single.grade;
          // this.gradeDTO.comment = single.comment;
          grade(this.gradeDTO).then(respones =>{
            this.$modal.msgSuccess("修改成功");
            this.listEval(this.queryParams);
          });
        }
      }
    }
</script>

<style scoped>

</style>
